<template>
  <div>
    <h1>首页</h1>
    <div>
      <!-- 错误写法 {{$store.user.state.token}} -->
      <!-- {{$store.state.模块名.字段名}} -->
      token: {{token}}
    </div>
    <div>
      name: {{name}}
    </div>
    <button @click="setNewStateUser(666)">修改数据</button>
    <button @click="setNewStateSetting(666)">修改数据</button>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {mapMutations as mapMutationsGlobal} from 'vuex'
// import 解构之后改名用 as 即可
console.log('全局');
console.log(mapMutationsGlobal);

import {createNamespacedHelpers} from 'vuex'
// const 结构时想要改名字, 用冒汗即可
const {mapMutations: mapMutationsUser} = createNamespacedHelpers('user')
const {mapMutations: mapMutationsSetting} = createNamespacedHelpers('setting')
console.log(mapMutationsUser);
console.log(mapMutationsSetting);

export default {
  computed: {
    ...mapGetters(['token','name'])
  },
  methods: {
    // mapMutaions 想要改名, 将数组形式换成对象即可
    ...mapMutationsUser({
      // key:value 指定新的函数名:封装时的名称
      setNewStateUser: 'setNewState'
    }),
    ...mapMutationsSetting({
      setNewStateSetting: 'setNewState'
    }),
  }
}
</script>

<style>

</style>